<template>
  <div class="layout-pd">
    <div class="container">
      <div class="search-btns">
        <div class="btns">
          <el-button v-if="auth(state.isHasAdd)" size="default" color="#18bc9c" @click="addFn">+ 添加</el-button>
        </div>
        <div class="search">
          <el-input v-model="state.formData.keyword" placeholder="请根据用户名进行搜索" class="input-with-select">
            <template #append>
              <el-button :icon="Search" @click="searchFn" />
            </template>
          </el-input>
        </div>
      </div>
      <div class="tables">
        <YxTable :header-cell-style="{ background: '#f5f7fa' }" border :selection="false" :isSerialNum="false"
          :data="state.tableData" :columnData="state.columnData" :isPage="true" :total="state.total"
          :page="state.pages.page" :psize="state.pages.limit" @size-change="sizeChange" @current-change="currentChange"
          :showOperator="true">
          <template v-slot:operate="{ row }">
            <!-- editRow(row);  -->
            <el-button v-if="auth(state.isHasEdit)" type="primary" text size="small"
              @click="operateFn('edit', row)">编辑</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="operateFn('del', row)">
              <template #reference>
                <el-button v-if="auth(state.isHasDel)" type="primary" text size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </YxTable>
      </div>
    </div>
    <AddUser ref="addUserRef" @updateList="getData"  @updateItem="handleUpdateItem"></AddUser>
  </div>
</template>

<script setup name="userManageIndex">
import { Search } from '@element-plus/icons-vue'
import { usersList, delUser } from '/@/api/users/index';
import { userManageColumn } from '/@/commmon/column';
import { auth } from '/@/utils/authFunction';
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
const YxTable = defineAsyncComponent(() => import('/@/components/YxTable/index.vue'));
const AddUser = defineAsyncComponent(() => import('/@/views/startfab/userManage/addUser.vue'));
const addUserRef = ref()
const state = reactive({
  isHasAdd: 'admin:admin:userAdd',
  isHasEdit: 'admin:admin:userEdit',
  isHasDel: 'admin:admin:userDel',
  formData: {
    keyword: ''
  },
  columnData: userManageColumn,
  total: 0,
  pages: {
    page: 1,
    limit: 10
  },
  tableData: [],
})
const addFn = () => {
  addUserRef.value.openDialog('add')
}
const operateFn = async (type, row) => {
  if (type == 'del') {
    const res = await delUser({ id: row.id });
    if (res.code === 10000) {
      searchFn();
    }
  } else {
    addUserRef.value.openDialog('edit', row)
  }
}
const getData = async () => {
  const params = {
    ...state.pages,
    search: state.formData.keyword,
  }
  const res = await usersList(params)
  if (res.code === 10000) {
    state.tableData = res.data.list;
    state.total = res.data.pageInfo.count;
  }
}
const currentChange = (val) => {
  state.pages.page = val
  getData()
}
const sizeChange = (val) => {
  state.pages.limit = val
  getData()
}
const searchFn = () => {
  state.pages.page = 1;
  state.pages.limit = 10;
  getData()
}
const handleUpdateItem = (updatedItem) => {
  const index = state.tableData.findIndex(item => item.id === updatedItem.id);
  if (index !== -1) {
   state.tableData[index] = updatedItem;
   
  }
};
onMounted(() => {
  searchFn()
})
</script>

<style scoped lang="scss">
.container {
  background: #FFFFFF;
  padding: 15px;

  ::v-deep .search-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-input-group__append {
      padding: 0px 15px;

      .el-icon {
        color: #333333;
        margin-right: 0px;
      }
    }

    .el-button {
      color: #FFFFFF;
    }
  }

  .tables {
    margin-top: 10px;
  }
}
</style>
